<template>
	<view class="pageView">
		<u-loading-page :loading="departmentListLoading" bg-color="#e8e8e8"></u-loading-page>
		<u-navbar
			title="选择科室"
			:autoBack="true"
			bgColor="#FAFBFF"
		>
		</u-navbar>
		<view class="listBlock">
			<scroll-view class="listBlock-left" scroll-y="true">
				<view
				  v-for="(item, index) in leftList"
					:key="index"
					:class="{
						'itemActive': firstIndex == index,
						'itemUnactive': firstIndex != index
					}"
					@click="handleClickItem(index)"
				>{{ item.name }}</view>
			</scroll-view>
			<scroll-view class="listBlock-right" scroll-y="true">
				<view
					v-for="(item, index) in rightList"
					:key="index"
					:class="{
						'secondItemActive': secondIndex == index,
						'secondItemUnactive': secondIndex != index
					}"
					@click="handleClickActiveItem(index)"
				>{{ item.name }}</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import { departmentList } from '@/api/common.js'
	export default{
		data() {
			return {
				firstIndex: 0,
				departmentListLoading: false,
				secondIndex: 0,
				leftList: [],
				rightList: []
			}
		},
		onShow() {
			this.leftList = []
			this.rightList = []
			this.getList()
		},
		methods: {
			getList() {
				this.departmentListLoading = true
				departmentList().then(res => {
					console.log(res)
					const { code, data } = res
					if (code == 200001) {
						data.map(item => {
							this.leftList.push(item)
							this.rightList = data[0].sub
						})
					}
					this.departmentListLoading = false
				})
				.catch(e => {
					this.departmentListLoading = false
				})
			},
			handleClickItem(index) {
				this.firstIndex = index
				if (this.leftList[index].sub.length == 0) {
					uni.setStorageSync('departmentData', this.leftList[index])
					uni.navigateTo({
						url: '/pages/createOrder/createOrder'
					})
				} else {
					this.rightList = []
					this.rightList = this.leftList[index].sub
				}
			},
			handleClickActiveItem(index) {
				uni.setStorageSync('departmentData', this.rightList[index])
				uni.navigateTo({
					url: '/pages/createOrder/createOrder'
				})
				this.secondIndex = index
			}
		}
	}
</script>

<style lang="less" scoped>
	.pageView{
		height: 100vh;
		background: #F4F4F4;
		.listBlock{
			display: flex;
			margin-top: 176rpx;
			&-left{
				width: 240rpx;
				height: 89vh;
				background: #FAFBFF;
				.itemActive{
					display: flex;
					align-items: center;
					justify-content: center;
					width: 240rpx;
					height: 104rpx;
					background: #fff;
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: normal;
					font-size: 32rpx;
					color: #0165FB;
				}
				.itemUnactive{
					display: flex;
					align-items: center;
					justify-content: center;
					width: 240rpx;
					height: 104rpx;
					background: #FAFBFF;
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: normal;
					font-size: 32rpx;
					color: #888888;
				}
			}
			&-right{
				height: 89vh;
				background: #fff;
				padding-top: 38rpx;
				.secondItemActive{
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: normal;
					font-size: 32rpx;
					color: #0165FB;
					line-height: 38rpx;
					padding-bottom: 52rpx;
					padding-left: 40rpx;
				}
				.secondItemUnactive{
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: normal;
					font-size: 32rpx;
					color: #444444;
					line-height: 38rpx;
					padding-bottom: 52rpx;
					padding-left: 40rpx;
				}
			}
		}
	}
</style>